<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="jquery-1.12.4.js"></script>
<script src="throttle.js"></script>
<script src="LoadImage.js"></script>
<script src="index.js"></script>
<html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <div class="loag-image">
            <img src="loading.svg" data-delay="kakaxi.jpg" alt="image loading...">
        </div>
        <div>
            <div id="my-app"></div>
        </div>

    </body>
</html>

<style>
    .loag-image{
        width: 400px;
        text-align: center;
        margin: 10px auto;
    }
    .loag-image img{
        max-width: 100%;
    }
    .item {
        width: 400px;
        padding: 40px;
        border-radius: 3px;
        background: #d4d4d4;
        margin: 10px auto;
    }
</style>
<script>
;(function($, throttle, AOS){
    console.log("init");

    var app = $("#my-app");
     
    function appDom(){
        console.log("appDom");
        var i = 0, _html="";
        while (i < 15) {
            _html += "<div class='item' data-aos='zoom-in-up' data-aos-once='true'>啦啦啦，我是卖报的小行家！</div>";
            i++;
        }
        app.append(_html);
     };
     
     appDom();

     throttle.requestAnimationFrame(function () {
        var isMiddle = $(window).scrollTop() + $(window).height() > $(document).height() - 500;
        if (isMiddle) {
            appDom(); 
        }
    }, 1000);

    AOS.init();

})(jQuery, Throttle, AOS);

setTimeout(function(){
    LoadImage.loadImg();
},2000);
    
</script>